<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅店入住管理系统</title>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            display: flex;
            background-color: #f5f5f5;
        }

        .sidebar {
            width: 200px;
            background-color: #2c3e50;
            color: white;
            padding-top: 20px;
        }

        .sidebar button {
            display: block;
            width: 100%;
            padding: 15px 20px;
            text-align: left;
            background-color: transparent;
            border: none;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 16px;
        }

        .sidebar button:hover {
            background-color: #34495e;
        }

        .sidebar button.active {
            background-color: #1abc9c;
        }

        .main-content {
            flex: 1;
            padding: 30px;
        }

        .tab-content {
            display: none;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #f0f0f0;
        }

        button {
            padding: 8px 16px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .add-btn {
            background-color: #2ecc71;
            color: white;
        }

        .add-btn:hover {
            background-color: #27ae60;
        }

        .edit-btn {
            background-color: #f39c12;
            color: white;
        }

        .edit-btn:hover {
            background-color: #e67e22;
        }

        .delete-btn {
            background-color: #e74c3c;
            color: white;
        }

        .delete-btn:hover {
            background-color: #c0392b;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 30%;
            border-radius: 8px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 新增搜索框样式 */
        .search-container {
            margin-bottom: 10px;
        }

        .search-container input[type="text"] {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .search-container button {
            padding: 8px 16px;
            border-radius: 4px;
            border: none;
            background-color: #3498db;
            color: white;
            cursor: pointer;
        }

        .search-container button:hover {
            background-color: #2980b9;
        }
    </style>
</head>

<body>
    <div class="sidebar">
        <button class="tablinks" onclick="openTab(event, 'Home')">首页</button>
        <button class="tablinks" onclick="openTab(event, 'RoomManagement')">房间管理</button>
        <button class="tablinks" onclick="openTab(event, 'GuestManagement')">客人管理</button>
        <button class="tablinks" onclick="openTab(event, 'ReservationManagement')">预订管理</button>
        <button class="tablinks" onclick="openTab(event, 'CheckInManagement')">入住管理</button>
        <button class="tablinks" onclick="openTab(event, 'Statistics')">数据统计</button>
    </div>
    <div class="main-content">
        <div id="Home" class="tab-content">
            <h2>首页</h2>
            <p>欢迎使用旅店入住管理系统，您可以通过左侧导航栏选择不同的功能模块进行操作。</p>
        </div>
        <div id="RoomManagement" class="tab-content">
            <h2>房间管理</h2>
            <!-- 新增搜索框 -->
            <div class="search-container">
                <input type="text" id="roomSearch" placeholder="搜索房间号">
                <button onclick="searchRooms()">搜索</button>
            </div>
            <button class="add-btn" onclick="openAddRoomModal()">添加房间</button>
            <table id="roomTable">
                <thead>
                    <tr>
                        <th>房间号</th>
                        <th>房间类型</th>
                        <th>价格</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="GuestManagement" class="tab-content">
            <h2>客人管理</h2>
            <!-- 新增搜索框 -->
            <div class="search-container">
                <input type="text" id="guestSearch" placeholder="搜索客人姓名">
                <button onclick="searchGuests()">搜索</button>
            </div>
            <button class="add-btn" onclick="openAddGuestModal()">添加客人</button>
            <table id="guestTable">
                <thead>
                    <tr>
                        <th>客人姓名</th>
                        <th>联系方式</th>
                        <th>身份证号</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="ReservationManagement" class="tab-content">
            <h2>预订管理</h2>
            <!-- 新增搜索框 -->
            <div class="search-container">
                <input type="text" id="reservationSearch" placeholder="搜索预订人姓名">
                <button onclick="searchReservations()">搜索</button>
            </div>
            <button class="add-btn" onclick="openAddReservationModal()">添加预订</button>
            <table id="reservationTable">
                <thead>
                    <tr>
                        <th>预订人姓名</th>
                        <th>房间号</th>
                        <th>预订日期</th>
                        <th>入住日期</th>
                        <th>退房日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="CheckInManagement" class="tab-content">
            <h2>入住管理</h2>
            <!-- 新增搜索框 -->
            <div class="search-container">
                <input type="text" id="checkInSearch" placeholder="搜索入住人姓名">
                <button onclick="searchCheckIns()">搜索</button>
            </div>
            <button class="add-btn" onclick="openAddCheckInModal()">添加入住</button>
            <table id="checkInTable">
                <thead>
                    <tr>
                        <th>入住人姓名</th>
                        <th>房间号</th>
                        <th>入住日期</th>
                        <th>退房日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="Statistics" class="tab-content">
            <h2>数据统计</h2>
            <p>房间总数: <span id="roomCount">0</span></p>
            <p>客人总数: <span id="guestCount">0</span></p>
            <p>预订总数: <span id="reservationCount">0</span></p>
            <p>入住总数: <span id="checkInCount">0</span></p>
        </div>
    </div>

    <!-- 添加房间模态框 -->
    <div id="addRoomModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddRoomModal()">&times;</span>
            <h3>添加/修改房间</h3>
            <label for="roomNumber">房间号:</label>
            <input type="text" id="roomNumber" placeholder="请输入房间号">
            <br>
            <label for="roomType">房间类型:</label>
            <input type="text" id="roomType" placeholder="请输入房间类型">
            <br>
            <label for="roomPrice">价格:</label>
            <input type="number" id="roomPrice" placeholder="请输入价格">
            <br>
            <label for="roomStatus">状态:</label>
            <select id="roomStatus">
                <option value="空闲">空闲</option>
                <option value="已预订">已预订</option>
                <option value="已入住">已入住</option>
            </select>
            <br>
            <button onclick="saveRoom()">保存</button>
        </div>
    </div>

    <!-- 添加客人模态框 -->
    <div id="addGuestModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddGuestModal()">&times;</span>
            <h3>添加/修改客人</h3>
            <label for="guestName">客人姓名:</label>
            <input type="text" id="guestName" placeholder="请输入客人姓名">
            <br>
            <label for="guestContact">联系方式:</label>
            <input type="text" id="guestContact" placeholder="请输入联系方式">
            <br>
            <label for="guestID">身份证号:</label>
            <input type="text" id="guestID" placeholder="请输入身份证号">
            <br>
            <button onclick="saveGuest()">保存</button>
        </div>
    </div>

    <!-- 添加预订模态框 -->
    <div id="addReservationModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddReservationModal()">&times;</span>
            <h3>添加/修改预订</h3>
            <label for="reservationName">预订人姓名:</label>
            <input type="text" id="reservationName" placeholder="请输入预订人姓名">
            <br>
            <label for="reservationRoom">房间号:</label>
            <input type="text" id="reservationRoom" placeholder="请输入房间号">
            <br>
            <label for="reservationDate">预订日期:</label>
            <input type="date" id="reservationDate">
            <br>
            <label for="checkInDate">入住日期:</label>
            <input type="date" id="checkInDate">
            <br>
            <label for="checkOutDate">退房日期:</label>
            <input type="date" id="checkOutDate">
            <br>
            <button onclick="saveReservation()">保存</button>
        </div>
    </div>

    <!-- 添加入住模态框 -->
    <div id="addCheckInModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddCheckInModal()">&times;</span>
            <h3>添加/修改入住</h3>
            <label for="checkInName">入住人姓名:</label>
            <input type="text" id="checkInName" placeholder="请输入入住人姓名">
            <br>
            <label for="checkInRoom">房间号:</label>
            <input type="text" id="checkInRoom" placeholder="请输入房间号">
            <br>
            <label for="checkInStartDate">入住日期:</label>
            <input type="date" id="checkInStartDate">
            <br>
            <label for="checkInEndDate">退房日期:</label>
            <input type="date" id="checkInEndDate">
            <br>
            <button onclick="saveCheckIn()">保存</button>
        </div>
    </div>

    <script>
        // 初始化表格
        function initTables() {
            // 房间管理
            let rooms = JSON.parse(localStorage.getItem('rooms')) || [
                { number: '101', type: '单人间', price: 100, status: '空闲' },
                { number: '102', type: '单人间', price: 100, status: '已预订' },
                { number: '103', type: '单人间', price: 100, status: '已入住' },
                { number: '201', type: '标准间', price: 200, status: '空闲' },
                { number: '202', type: '标准间', price: 200, status: '已预订' },
                { number: '203', type: '标准间', price: 200, status: '已入住' },
                { number: '301', type: '豪华套房', price: 500, status: '空闲' },
                { number: '302', type: '豪华套房', price: 500, status: '已预订' },
                { number: '303', type: '豪华套房', price: 500, status: '已入住' },
                { number: '401', type: '总统套房', price: 1000, status: '空闲' }
            ];
            localStorage.setItem('rooms', JSON.stringify(rooms));
            let roomTable = document.getElementById('roomTable').getElementsByTagName('tbody')[0];
            roomTable.innerHTML = '';
            rooms.forEach((room, index) => {
                let row = roomTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                let cell5 = row.insertCell(4);
                cell1.innerHTML = room.number;
                cell2.innerHTML = room.type;
                cell3.innerHTML = room.price;
                cell4.innerHTML = room.status;
                cell5.innerHTML = `<button class="edit-btn" onclick="openEditRoomModal(${index})">编辑</button><button class="delete-btn" onclick="deleteRoom(${index})">删除</button>`;
            });

            // 客人管理
            let guests = JSON.parse(localStorage.getItem('guests')) || [
                { name: '张三', contact: '13800138000', id: '123456789012345678' },
                { name: '李四', contact: '13900139000', id: '234567890123456789' },
                { name: '王五', contact: '13700137000', id: '345678901234567890' },
                { name: '赵六', contact: '13600136000', id: '456789012345678901' },
                { name: '孙七', contact: '13500135000', id: '567890123456789012' },
                { name: '周八', contact: '13400134000', id: '678901234567890123' },
                { name: '吴九', contact: '13300133000', id: '789012345678901234' },
                { name: '郑十', contact: '13200132000', id: '890123456789012345' },
                { name: '王十一', contact: '13100131000', id: '901234567890123456' },
                { name: '李十二', contact: '13000130000', id: '012345678901234567' }
            ];
            localStorage.setItem('guests', JSON.stringify(guests));
            let guestTable = document.getElementById('guestTable').getElementsByTagName('tbody')[0];
            guestTable.innerHTML = '';
            guests.forEach((guest, index) => {
                let row = guestTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = guest.name;
                cell2.innerHTML = guest.contact;
                cell3.innerHTML = guest.id;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditGuestModal(${index})">编辑</button><button class="delete-btn" onclick="deleteGuest(${index})">删除</button>`;
            });

            // 预订管理
            let reservations = JSON.parse(localStorage.getItem('reservations')) || [
                { name: '张三', room: '102', reservationDate: '2025-03-20', checkInDate: '2025-03-25', checkOutDate: '2025-03-28' },
                { name: '李四', room: '202', reservationDate: '2025-03-21', checkInDate: '2025-03-26', checkOutDate: '2025-03-29' },
                { name: '王五', room: '302', reservationDate: '2025-03-22', checkInDate: '2025-03-27', checkOutDate: '2025-03-30' },
                { name: '赵六', room: '102', reservationDate: '2025-03-23', checkInDate: '2025-03-28', checkOutDate: '2025-03-31' },
                { name: '孙七', room: '202', reservationDate: '2025-03-24', checkInDate: '2025-03-29', checkOutDate: '2025-04-01' },
                { name: '周八', room: '302', reservationDate: '2025-03-25', checkInDate: '2025-03-30', checkOutDate: '2025-04-02' },
                { name: '吴九', room: '102', reservationDate: '2025-03-26', checkInDate: '2025-03-31', checkOutDate: '2025-04-03' },
                { name: '郑十', room: '202', reservationDate: '2025-03-27', checkInDate: '2025-04-01', checkOutDate: '2025-04-04' },
                { name: '王十一', room: '302', reservationDate: '2025-03-28', checkInDate: '2025-04-02', checkOutDate: '2025-04-05' },
                { name: '李十二', room: '102', reservationDate: '2025-03-29', checkInDate: '2025-04-03', checkOutDate: '2025-04-06' }
            ];
            localStorage.setItem('reservations', JSON.stringify(reservations));
            let reservationTable = document.getElementById('reservationTable').getElementsByTagName('tbody')[0];
            reservationTable.innerHTML = '';
            reservations.forEach((reservation, index) => {
                let row = reservationTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                let cell5 = row.insertCell(4);
                let cell6 = row.insertCell(5);
                cell1.innerHTML = reservation.name;
                cell2.innerHTML = reservation.room;
                cell3.innerHTML = reservation.reservationDate;
                cell4.innerHTML = reservation.checkInDate;
                cell5.innerHTML = reservation.checkOutDate;
                cell6.innerHTML = `<button class="edit-btn" onclick="openEditReservationModal(${index})">编辑</button><button class="delete-btn" onclick="deleteReservation(${index})">删除</button>`;
            });

            // 入住管理
            let checkIns = JSON.parse(localStorage.getItem('checkIns')) || [
                { name: '张三', room: '103', checkInDate: '2025-03-20', checkOutDate: '2025-03-25' },
                { name: '李四', room: '203', checkInDate: '2025-03-21', checkOutDate: '2025-03-26' },
                { name: '王五', room: '303', checkInDate: '2025-03-22', checkOutDate: '2025-03-27' },
                { name: '赵六', room: '103', checkInDate: '2025-03-23', checkOutDate: '2025-03-28' },
                { name: '孙七', room: '203', checkInDate: '2025-03-24', checkOutDate: '2025-03-29' },
                { name: '周八', room: '303', checkInDate: '2025-03-25', checkOutDate: '2025-03-30' },
                { name: '吴九', room: '103', checkInDate: '2025-03-26', checkOutDate: '2025-03-31' },
                { name: '郑十', room: '203', checkInDate: '2025-03-27', checkOutDate: '2025-04-01' },
                { name: '王十一', room: '303', checkInDate: '2025-03-28', checkOutDate: '2025-04-02' },
                { name: '李十二', room: '103', checkInDate: '2025-03-29', checkOutDate: '2025-04-03' }
            ];
            localStorage.setItem('checkIns', JSON.stringify(checkIns));
            let checkInTable = document.getElementById('checkInTable').getElementsByTagName('tbody')[0];
            checkInTable.innerHTML = '';
            checkIns.forEach((checkIn, index) => {
                let row = checkInTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                let cell5 = row.insertCell(4);
                cell1.innerHTML = checkIn.name;
                cell2.innerHTML = checkIn.room;
                cell3.innerHTML = checkIn.checkInDate;
                cell4.innerHTML = checkIn.checkOutDate;
                cell5.innerHTML = `<button class="edit-btn" onclick="openEditCheckInModal(${index})">编辑</button><button class="delete-btn" onclick="deleteCheckIn(${index})">删除</button>`;
            });

            // 更新数据统计
            let roomCount = rooms.length;
            let guestCount = guests.length;
            let reservationCount = reservations.length;
            let checkInCount = checkIns.length;
            document.getElementById('roomCount').textContent = roomCount;
            document.getElementById('guestCount').textContent = guestCount;
            document.getElementById('reservationCount').textContent = reservationCount;
            document.getElementById('checkInCount').textContent = checkInCount;
        }

        // 打开 tab 页面
        function openTab(evt, tabName) {
            let i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName('tab-content');
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = 'none';
            }
            tablinks = document.getElementsByClassName('tablinks');
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(' active', '');
            }
            document.getElementById(tabName).style.display = 'block';
            evt.currentTarget.className += ' active';
        }

        // 房间管理
        let currentRoomIndex = null;
        function openAddRoomModal() {
            currentRoomIndex = null;
            document.getElementById('roomNumber').value = '';
            document.getElementById('roomType').value = '';
            document.getElementById('roomPrice').value = '';
            document.getElementById('roomStatus').value = '空闲';
            document.getElementById('addRoomModal').style.display = 'block';
        }

        function openEditRoomModal(index) {
            currentRoomIndex = index;
            let rooms = JSON.parse(localStorage.getItem('rooms'));
            let room = rooms[index];
            document.getElementById('roomNumber').value = room.number;
            document.getElementById('roomType').value = room.type;
            document.getElementById('roomPrice').value = room.price;
            document.getElementById('roomStatus').value = room.status;
            document.getElementById('addRoomModal').style.display = 'block';
        }

        function closeAddRoomModal() {
            document.getElementById('addRoomModal').style.display = 'none';
        }

        function saveRoom() {
            let rooms = JSON.parse(localStorage.getItem('rooms')) || [];
            let number = document.getElementById('roomNumber').value;
            let type = document.getElementById('roomType').value;
            let price = parseInt(document.getElementById('roomPrice').value);
            let status = document.getElementById('roomStatus').value;
            if (currentRoomIndex === null) {
                rooms.push({ number, type, price, status });
            } else {
                rooms[currentRoomIndex] = { number, type, price, status };
            }
            localStorage.setItem('rooms', JSON.stringify(rooms));
            initTables();
            closeAddRoomModal();
        }

        function deleteRoom(index) {
            let rooms = JSON.parse(localStorage.getItem('rooms')) || [];
            rooms.splice(index, 1);
            localStorage.setItem('rooms', JSON.stringify(rooms));
            initTables();
        }

        function searchRooms() {
            let input = document.getElementById('roomSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('roomTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        // 客人管理
        let currentGuestIndex = null;
        function openAddGuestModal() {
            currentGuestIndex = null;
            document.getElementById('guestName').value = '';
            document.getElementById('guestContact').value = '';
            document.getElementById('guestID').value = '';
            document.getElementById('addGuestModal').style.display = 'block';
        }

        function openEditGuestModal(index) {
            currentGuestIndex = index;
            let guests = JSON.parse(localStorage.getItem('guests'));
            let guest = guests[index];
            document.getElementById('guestName').value = guest.name;
            document.getElementById('guestContact').value = guest.contact;
            document.getElementById('guestID').value = guest.id;
            document.getElementById('addGuestModal').style.display = 'block';
        }

        function closeAddGuestModal() {
            document.getElementById('addGuestModal').style.display = 'none';
        }

        function saveGuest() {
            let guests = JSON.parse(localStorage.getItem('guests')) || [];
            let name = document.getElementById('guestName').value;
            let contact = document.getElementById('guestContact').value;
            let id = document.getElementById('guestID').value;
            if (currentGuestIndex === null) {
                guests.push({ name, contact, id });
            } else {
                guests[currentGuestIndex] = { name, contact, id };
            }
            localStorage.setItem('guests', JSON.stringify(guests));
            initTables();
            closeAddGuestModal();
        }

        function deleteGuest(index) {
            let guests = JSON.parse(localStorage.getItem('guests')) || [];
            guests.splice(index, 1);
            localStorage.setItem('guests', JSON.stringify(guests));
            initTables();
        }

        function searchGuests() {
            let input = document.getElementById('guestSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('guestTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        // 预订管理
        let currentReservationIndex = null;
        function openAddReservationModal() {
            currentReservationIndex = null;
            document.getElementById('reservationName').value = '';
            document.getElementById('reservationRoom').value = '';
            document.getElementById('reservationDate').value = '';
            document.getElementById('checkInDate').value = '';
            document.getElementById('checkOutDate').value = '';
            document.getElementById('addReservationModal').style.display = 'block';
        }

        function openEditReservationModal(index) {
            currentReservationIndex = index;
            let reservations = JSON.parse(localStorage.getItem('reservations'));
            let reservation = reservations[index];
            document.getElementById('reservationName').value = reservation.name;
            document.getElementById('reservationRoom').value = reservation.room;
            document.getElementById('reservationDate').value = reservation.reservationDate;
            document.getElementById('checkInDate').value = reservation.checkInDate;
            document.getElementById('checkOutDate').value = reservation.checkOutDate;
            document.getElementById('addReservationModal').style.display = 'block';
        }

        function closeAddReservationModal() {
            document.getElementById('addReservationModal').style.display = 'none';
        }

        function saveReservation() {
            let reservations = JSON.parse(localStorage.getItem('reservations')) || [];
            let name = document.getElementById('reservationName').value;
            let room = document.getElementById('reservationRoom').value;
            let reservationDate = document.getElementById('reservationDate').value;
            let checkInDate = document.getElementById('checkInDate').value;
            let checkOutDate = document.getElementById('checkOutDate').value;
            if (currentReservationIndex === null) {
                reservations.push({ name, room, reservationDate, checkInDate, checkOutDate });
            } else {
                reservations[currentReservationIndex] = { name, room, reservationDate, checkInDate, checkOutDate };
            }
            localStorage.setItem('reservations', JSON.stringify(reservations));
            initTables();
            closeAddReservationModal();
        }

        function deleteReservation(index) {
            let reservations = JSON.parse(localStorage.getItem('reservations')) || [];
            reservations.splice(index, 1);
            localStorage.setItem('reservations', JSON.stringify(reservations));
            initTables();
        }

        function searchReservations() {
            let input = document.getElementById('reservationSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('reservationTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        // 入住管理
        let currentCheckInIndex = null;
        function openAddCheckInModal() {
            currentCheckInIndex = null;
            document.getElementById('checkInName').value = '';
            document.getElementById('checkInRoom').value = '';
            document.getElementById('checkInStartDate').value = '';
            document.getElementById('checkInEndDate').value = '';
            document.getElementById('addCheckInModal').style.display = 'block';
        }

        function openEditCheckInModal(index) {
            currentCheckInIndex = index;
            let checkIns = JSON.parse(localStorage.getItem('checkIns'));
            let checkIn = checkIns[index];
            document.getElementById('checkInName').value = checkIn.name;
            document.getElementById('checkInRoom').value = checkIn.room;
            document.getElementById('checkInStartDate').value = checkIn.checkInDate;
            document.getElementById('checkInEndDate').value = checkIn.checkOutDate;
            document.getElementById('addCheckInModal').style.display = 'block';
        }

        function closeAddCheckInModal() {
            document.getElementById('addCheckInModal').style.display = 'none';
        }

        function saveCheckIn() {
            let checkIns = JSON.parse(localStorage.getItem('checkIns')) || [];
            let name = document.getElementById('checkInName').value;
            let room = document.getElementById('checkInRoom').value;
            let checkInDate = document.getElementById('checkInStartDate').value;
            let checkOutDate = document.getElementById('checkInEndDate').value;
            if (currentCheckInIndex === null) {
                checkIns.push({ name, room, checkInDate, checkOutDate });
            } else {
                checkIns[currentCheckInIndex] = { name, room, checkInDate, checkOutDate };
            }
            localStorage.setItem('checkIns', JSON.stringify(checkIns));
            initTables();
            closeAddCheckInModal();
        }

        function deleteCheckIn(index) {
            let checkIns = JSON.parse(localStorage.getItem('checkIns')) || [];
            checkIns.splice(index, 1);
            localStorage.setItem('checkIns', JSON.stringify(checkIns));
            initTables();
        }

        function searchCheckIns() {
            let input = document.getElementById('checkInSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('checkInTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        // 页面加载完成后初始化表格
        window.onload = function () {
            initTables();
            openTab(event, 'Home');
        };
    </script>
</body>

</html>